<template>
  <div>
    <input type="radio"
      class="input_check"
      :disabled="disabled"
      :checked="checked"
      name='a'
      @change="change"/>
  </div>

</template>
<script>
export default {
  data(){
    return{
      // checked: false
    }
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  methods:{
    change(e){
      this.$emit('change', e.target.checked)
    }
  },
  props:{
    checked:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    }
  }
}
</script>
<style scoped>
input[type=radio] {
  width: 1rem;
  height: 1rem;
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  outline: 0 !important;
  color: #d8d8d8;
  position: relative;
}
input[type=radio]:before{
  content: "";
  display:block;
  width: 1rem;
  height: 1rem;
  border: 1px solid #ddd;
  background-color: #fff;
  box-sizing:border-box;
  border-radius: 1rem;
  position: absolute;
}

input[type=radio]:disabled:before{
  content: "";
  display:block;
  width: 1rem;
  height: 1rem;
  border: 1px solid #333;
  background-color: #333;
  box-sizing:border-box;
  border-radius: 1rem;
  position: absolute;
}
input[type=radio]:checked:before{
  content: "";
  display:block;
  width: 1rem;
  height: 1rem;
  border: 1px solid #D2A47E;
  background-color: #D2A47E;
  box-sizing:border-box;
  border-radius: 1rem;
  position: absolute;
}
input[type=radio]:checked:after{
  content: "";
  display:block;
  width: .4rem;
  height: .8rem;
  border-left: .06rem solid #fff;
  border-top: .06rem solid #fff;
  border-width: .18em;
  border-radius:  .06rem;
  box-sizing:border-box;
  position: absolute;
  transform: rotate(-135deg) translate(-70%, 25%);
}
</style>
